<template>
    <a-row class="poverty-policy">
        <div class="left" style="padding: 80px 20px 0 0">
            <BorderBox13 class="border-box">
                <PolicyBarComp
                    :classOptions="classOptions"
                    :list="policys"
                    :title="'扶贫政策'"
                    :height="'400px'"
                ></PolicyBarComp>
            </BorderBox13>
            <BorderBox13 class="border-box" style="margin-top: 40px">
                <PolicyBarComp
                    :classOptions="classOptions"
                    :list="news"
                    :title="'最新动态'"
                    :height="'400px'"
                ></PolicyBarComp>
            </BorderBox13>
        </div>
        <div class="right" style="padding: 80px 0 0 20px">
            <BorderBox13 class="border-box">
                <PolicyBarComp
                    :classOptions="classOptions"
                    :list="news"
                    :title="'新闻动态'"
                    :height="'400px'"
                ></PolicyBarComp>
            </BorderBox13>
            <BorderBox13 class="border-box" style="margin-top: 40px">
                <PolicyBarComp
                    :classOptions="classOptions"
                    :list="serves"
                    :title="'服务信息'"
                    :height="'400px'"
                ></PolicyBarComp>
            </BorderBox13>
        </div>
    </a-row>
</template>
<script lang="ts">
import { BorderBox13 } from '@kjgl77/datav-vue3'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'

import PolicyBarComp from './comps/policy-bar-comp/index.vue'

import { List } from './store'

export default defineComponent({
    name: 'Distribute',
    components: {
        BorderBox13,

        PolicyBarComp
    },
    setup() {
        const constant = {
            colors: ['#6699ff', '#4557f4'],
            classOptions: {
                step: 0.4
            }
        }
        const state = reactive({
            policys: [] as any[],
            news: [] as any[],
            serves: [] as any[],
            latest: [] as any[]
        })
        onMounted(() => {
            methods.getList()
        })
        const methods = {
            async getList() {
                try {
                    const { result } = await List()
                    state.policys = result.map((el: any) => {
                        return {
                            label: el.year,
                            value: JSON.parse(el.policys)
                        }
                    })
                    state.news = result.map((el: any) => {
                        return {
                            label: el.year,
                            value: JSON.parse(el.news)
                        }
                    })
                    state.serves = result.map((el: any) => {
                        return {
                            label: el.year,
                            value: JSON.parse(el.serves)
                        }
                    })

                    state.latest = result.map((el: any) => {
                        return {
                            label: el.year,
                            value: JSON.parse(el.latest)
                        }
                    })
                } catch (err) {
                    console.log(err)
                }
            }
        }
        return {
            ...toRefs(state),
            ...methods,
            ...constant
        }
    }
})
</script>
<style lang="scss" scoped>
.poverty-policy {
    padding: 5px 20px;
}
.left,
.right {
    flex: 0.5;
    height: 100%;
}

.border-box {
    padding: 10px;
}
</style>
